<template>
  <div>
      <el-card style="width:98%;margin:auto;margin-top:10px;">
        <el-row>
            <el-col :span="3" style="text-align:right;">
                <img src="@/assets/lesson.jpg" alt="">
            </el-col>
            <el-col :span="12">
                <el-form :model="headerList" label-width="80px">
                    <el-form-item label="章节名称" prop="lessonName">
                        <span>{{headerList.chapterName}}</span>
                    </el-form-item>
                    <!-- <el-form-item label="教师名称" prop="nickname">
                        <span>{{headerList.nickname}}</span>
                    </el-form-item> -->
                    <el-form-item label="章节介绍" prop="introduction">
                        <span>{{headerList.introduction}}</span>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
      </el-card>
      <el-card style="width:98%;margin:auto;margin-top:10px;">
        <!-- <el-tree :data="treeList" @node-click="nodeClick" v-loading="listLoading" :load="loadNode1" :props="defaultProps" lazy accordion></el-tree> -->
        <el-upload action="#" :http-request="fileUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small" type="primary">点击上传</el-button>
            <span style="margin-left:20px;">请使用括号内的格式上传(docx,doc,xlsx,xls,ppt,pptx,zip,rar,7z,avi,mp4)</span>
        </el-upload>
      </el-card>
      <el-card style="width:98%;margin:auto;margin-top:10px;">
          <el-table :data="fileList" border>
              <el-table-column label="文件" prop="fileName" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="downFile(scope)">下载</el-button>
                      <el-button>删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </el-card>
  </div>
</template>

<script>
import { getOne,saveVideo,insertVideo,getChapterFile,fileDownload } from '@/api/lesson'
export default {
    data(){
        return {
            list:[],
            // treeList:[],
            // listLoading:false,
            search:{
                lessonId:0,
                chapterAfterId:0
            },
            // defaultProps:{
            //     children:'children',
            //     label:'label',
            //     isLeaf:'leaf'
            // },
            headerList:{
                lessonId: null,
                chapterId:null,
                // userId: null,
                chapterName: "",
                introduction: "",
                // nickname:""
            },
            fileList:[]
        }
    },
    mounted(){
        // this.search.lessonId=this.$route.query.lessonId
        // this.fetchData()
        getOne({id:this.$route.query.chapterAfterId}).then((success)=>{
            this.headerList.lessonId=success.data.lessonId
            this.headerList.chapterId=success.data.chapterId
            // this.headerList.userId=success.data.userId
            this.headerList.chapterName=success.data.chapterName
            this.headerList.introduction=success.data.introduction
            // this.headerList.nickname=success.data.nickname
            this.getFileList()
        })
        
    },
    methods:{
        beforeUpload(file){
            console.log(file)
            if( file.name.split('.')[1]=='docx'||
                file.name.split('.')[1]=='doc'||
                file.name.split('.')[1]=='xlsx'||
                file.name.split('.')[1]=='xls'||
                file.name.split('.')[1]=='ppt'||
                file.name.split('.')[1]=='pptx'||
                file.name.split('.')[1]=='zip'||
                file.name.split('.')[1]=='rar'||
                file.name.split('.')[1]=='avi'||
                file.name.split('.')[1]=='7z'||
                file.name.split('.')[1]=='mp4'){
                    return Promise.resolve()
                }
            this.$message('请上传正确文件')
            return Promise.reject('请上传正确文件')
        },
        fileUpload(file){
            console.log(file)
            let obj={
                chapterId:this.headerList.chapterId,
                fileName:file.file.name,
                fileUrl:'',
                suffix:file.file.name.split('.')[1]
            }
            let formData=new FormData()
            formData.append('file',file.file)
            saveVideo(formData).then((success)=>{
                console.log(success)
                obj.fileUrl=success.data
                insertVideo(obj).then((res)=>{
                    console.log(res)
                    this.getFileList()
                })
            })
        },
        getFileList(){
            let obj={
                id:this.headerList.chapterId
            }
            getChapterFile(obj).then((success)=>{
                console.log(success)
                this.fileList=success.data
            })
        },
        downFile(scope){
            console.log(scope.row)
            fileDownload({name:scope.row.fileUrl}).then((res)=>{
                // console.log(success)
                const link = document.createElement('a')
                let blob
                switch(scope.row.suffix){
                    case 'docx': 
                        blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
                        break;
                    case 'doc': 
                        blob = new Blob([res.data], { type: 'application/msword' })
                        break;
                    case 'xlsx': 
                        blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
                        break;
                    case 'xls': 
                        blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
                        break;
                    case 'ppt': 
                        blob = new Blob([res.data], { type: 'application/vnd.ms-powerpoint' })
                        break;
                    case 'pptx': 
                        blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' })
                        break;
                    case 'zip': 
                        blob = new Blob([res.data], { type: 'application/zip' })
                        break;
                    case 'rar': 
                        blob = new Blob([res.data], { type: 'application/x-rar' })
                        break;
                    case 'avi': 
                        blob = new Blob([res.data], { type: 'video/avi' })
                        break;
                    case '7z': 
                        blob = new Blob([res.data], { type: 'application/octet-stream' })
                        break;
                    case 'mp4': 
                        blob = new Blob([res.data], { type: 'video/mp4' })
                        break;
                    
                    
                }
                link.style.display = 'none'
                let url=URL.createObjectURL(blob)
                link.href = url
                document.body.appendChild(link); //把a标签放在body上
                link.click(); //出发a标签点击下载
                document.body.removeChild(link); //在body中移除这个a标签
                URL.revokeObjectURL(url); //释放blob对象
            })
        },
    }
}
</script>

<style>

</style>